<template>
  <div class="SearchResult-container">
    <base-modal
      title="搜索结果"
      cancel-text="关闭"
      ok-text="返回搜索框"
      :width="'80%'"
      v-on="$listeners"
      @ok="handleOk"
    >
      <div class="SearchResult-page-header">
        <span>搜索结果：共{{ initList.length }}个</span>
        <a-button @click="handleSinglePosition({}, 'all')">
          全部定位
        </a-button>
      </div>
      <div class="SearchResult-page-body">
        <a-table
          row-key="id"
          :columns="columns"
          :data-source="initList"
          :pagination="{ pageSize: 10 }"
          :scroll="{ y: 350 }"
        >
          <span
            slot="position"
            slot-scope="text, record"
          >
            <a-icon
              class="base-btn"
              type="environment"
              @click="handleSinglePosition(record)"
            />
          </span>
        </a-table>
      </div>
    </base-modal>
  </div>
</template>

<script>
import BaseModal from "@/components/BaseModal";
export default {
  components: {
    BaseModal,
  },
  props: {
    initList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      columns: [
        {
          title: "序号",
          width: "10%",
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`,
        },

        {
          title: "类型",
          dataIndex: "type",
          key: "type",
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "数量",
          dataIndex: "domain",
          key: "domain",
        },
        {
            title: '定位',
            dataIndex: 'position',
            key: 'position',
            scopedSlots: { customRender: 'position' }
        }
      ],
    };
  },
  methods: {
      handleSinglePosition(data, type = 'single') {
          this.$emit('position', {
            type: type,
            ids: type === 'single' ? [data.uuid] : this.initList.map(item => item.uuid)
          })
      },
      handleOk() {
          this.$emit('backSearch')
      }
  }
};
</script>

<style lang="less">
.SearchResult-container {
    .SearchResult-page-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
    }
}
    .SearchResult-page-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
    }
</style>